<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="550px"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="84px"
        :rules="formRules"
        :inline="true"
      >
        <div>基础配置</div>
        <el-form-item label="执行器">
          <el-select
            class="w-[280px]"
            v-model="formData.jobGroup"
            placeholder="执行器"
          >
            <el-option
              v-for="(item, index) in jobinfoInit.JobGroupList"
              :key="index"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务描述" prop="jobDesc">
          <el-input
            v-model="formData.jobDesc"
            placeholder="请输入任务描述"
            clearable
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="负责人" prop="author">
          <el-input
            v-model="formData.author"
            placeholder="请输入负责人"
            clearable
          />
        </el-form-item>
        <el-form-item label="报警邮件" prop="alarmEmail">
          <el-input
            v-model="formData.alarmEmail"
            placeholder="请输入报警邮件"
            clearable
          />
        </el-form-item>
        <div>调度配置</div>
        <el-form-item label="调度类型" prop="scheduleType">
          <el-select
            class="w-[280px]"
            v-model="formData.scheduleType"
            placeholder="调度类型"
          >
            <el-option
              v-for="(item, index) in jobinfoInit.ScheduleTypeEnum"
              :key="index"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="Corn"
          prop="scheduleConf"
          v-if="formData.scheduleType == 'CRON'"
        >
          <el-input
            v-model="formData.scheduleConf"
            placeholder="请输入corn表达式"
          />
        </el-form-item>
        <el-form-item
          label="固定速度"
          prop="scheduleConf"
          v-if="formData.scheduleType == 'FIX_RATE'"
        >
          <el-input
            v-model="formData.scheduleConf"
            type="number"
            placeholder="请输入数字 (单位:秒)"
          />
        </el-form-item>
        <div>任务配置</div>
        <el-form-item label="运行模式">
          <el-select
            class="w-[280px]"
            v-model="formData.glueType"
            placeholder="请选择运行模式"
          >
            <el-option
              v-for="(item, index) in jobinfoInit.GlueTypeEnum"
              :key="index"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="jobHandler" prop="executorHandler">
          <el-input
            v-model="formData.executorHandler"
            placeholder="请输入jobHandler"
          />
        </el-form-item>
        <el-form-item label="任务参数" prop="executorParam">
          <el-input
            v-model="formData.executorParam"
            placeholder="请输入任务参数"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <div>高级配置</div>
        <el-form-item label="路由策略">
          <el-select
            class="w-[280px]"
            v-model="formData.executorRouteStrategy"
            placeholder="请选择路由策略"
          >
            <el-option
              v-for="(item, index) in jobinfoInit.ExecutorRouteStrategyEnum"
              :key="index"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="子任务id" prop="childJobId">
          <el-input
            v-model="formData.childJobId"
            placeholder="请输入子任务id,如存在多个用逗号隔开"
          />
        </el-form-item>
        <el-form-item label="调度过期策略">
          <el-select
            class="w-[280px]"
            v-model="formData.misfireStrategy"
            placeholder="请选择调度过期策略"
          >
            <el-option
              v-for="(item, index) in jobinfoInit.MisfireStrategyEnum"
              :key="index"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="阻塞处理策略">
          <el-select
            class="w-[280px]"
            v-model="formData.executorBlockStrategy"
            placeholder="请选择阻塞处理策略"
          >
            <el-option
              v-for="(item, index) in jobinfoInit.ExecutorBlockStrategyEnum"
              :key="index"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务超时时间" prop="executorTimeout">
          <el-input
            v-model="formData.executorTimeout"
            type="number"
            placeholder="任务超时时间,单位:秒,大于0生效"
          />
        </el-form-item>
        <el-form-item label="失败重试次数" prop="executorFailRetryCount">
          <el-input
            v-model="formData.executorFailRetryCount"
            type="number"
            placeholder="大于0生效"
          />
        </el-form-item>
      </el-form>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import { addjobinfo, updatejobinfo } from "@/api/system/jobapi";
import Popup from "@/components/popup/index.vue";
import feedback from "@/utils/feedback";
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const jobinfoInit = ref({});
const mode = ref("add");
const popupTitle = computed(() => {
  return mode.value == "edit" ? "编辑" : "新增";
});
const formData = reactive({
  id: undefined,
  jobGroup: undefined,
  jobDesc: "",
  author: "",
  alarmEmail: "",
  scheduleType: "",
  scheduleConf: "",
  glueType: "",
  jobHandler: "",
  executorParam: "",
  executorRouteStrategy: "FIRST",
  childJobId: "",
  misfireStrategy: "DO_NOTHING",
  executorBlockStrategy: "SERIAL_EXECUTION",
  executorTimeout: undefined,
  executorFailRetryCount: undefined
});

const formRules = {
  jobGroup: [
    {
      required: true,
      message: "请选择执行器",
      trigger: ["blur"]
    }
  ],
  jobDesc: [
    {
      required: true,
      message: "请输入任务描述",
      trigger: ["blur"]
    }
  ],
  author: [
    {
      required: true,
      message: "请输入负责人",
      trigger: ["blur"]
    }
  ],
  scheduleType: [
    {
      required: true,
      message: "请选择调度类型",
      trigger: ["blur"]
    }
  ],
  scheduleConf: [
    {
      required: true,
      message: "请输入调度类型配置",
      trigger: ["blur"]
    }
  ],
  glueType: [
    {
      required: true,
      message: "请选择运行模式",
      trigger: ["blur"]
    }
  ],
  jobHandler: [
    {
      required: true,
      message: "请输入执行的jobHandler",
      trigger: ["blur"]
    }
  ]
};

const handleSubmit = async () => {
  await formRef.value?.validate();
  mode.value == "edit"
    ? await updatejobinfo(formData)
    : await addjobinfo(formData);
  feedback.msgSuccess("操作成功");
  popupRef.value?.close();
  emit("success");
};

const open = (type = "add", jobInit: any) => {
  mode.value = type;
  jobinfoInit.value = jobInit;
  popupRef.value?.open();
};

const setFormData = (data: Record<any, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

const getDetail = async (row: Record<string, any>) => {
  setFormData(row);
};

const handleClose = () => {
  emit("close");
};

defineExpose({
  open,
  setFormData,
  getDetail
});
</script>
